/* components */
import { BaseSelectUserTreeComponent, BaseSelectUserNoDataView } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserComponentServiceProvider } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import {
  useBaseSelectUserStoreCurrentServiceProviderNav,
  useBaseSelectUserStoreLoadingMap, useBaseSelectUserStoreServiceProviderList, useBaseSelectUserStoreUserListMap
} from '@src/component/common/BaseSelectUser/store'
import { useBaseSelectUserOptions, useBaseSelectUserServiceProviderUserListParams, useFetchServiceProviderUserList, useSelectUserChecked, useSelectUserCheckedItemList, useSelectUserIsShowCheckbox } from '@src/component/common/BaseSelectUser/hooks'
/* scss */
import '@src/component/common/BaseSelectUser/components/ServiceProvider/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isFalse } from '@src/util/type'
import { getCheckedItemId } from '@src/component/common/BaseSelectUser/util'

export type ServiceProviderProps = {
  isMulti: boolean;
  value: SelectUserComponentServiceProvider[];
}

export interface ServiceProviderSetupState {
  
}

export enum ServiceProviderEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
  LoadUser = 'loadUser',
}

export type ServiceProviderInstance = ComponentInstance & ServiceProviderSetupState
export type ServiceProviderVM = ComponentRenderProxy<ServiceProviderProps> & CommonComponentInstance & ServiceProviderInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderLeft,
  emits: [
    ServiceProviderEmitEventNameEnum.Input,
    ServiceProviderEmitEventNameEnum.Click,
    ServiceProviderEmitEventNameEnum.LoadUser
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentServiceProvider[]>,
      default: () => []
    }
  },
  setup(props: ServiceProviderProps, { emit }) {
    
    // 服务商列表
    const { serviceProviderList, isServiceProviderListEmpty, isServiceProviderListNotEmpty } = useBaseSelectUserStoreServiceProviderList()
    // 服务商成员列表
    const { setServiceProviderUserList } = useBaseSelectUserStoreUserListMap()
    // 服务商加载状态
    const { serviceProviderLoading, tabLoading } = useBaseSelectUserStoreLoadingMap()
    // 当前服务商导航
    const { currentServiceProviderNav, setCurrentServiceProviderNav } = useBaseSelectUserStoreCurrentServiceProviderNav()
    // 服务商成员列表参数
    const { resetPageNum } = useBaseSelectUserServiceProviderUserListParams()
    // 已选中数据
    const { addCheckedItem, removeCheckedItem, checkedServiceProviderItemList } = useSelectUserCheckedItemList()
    // 复选框
    const { isShowServiceProviderCheckbox } = useSelectUserIsShowCheckbox()
    const { showSpAll } = useBaseSelectUserOptions()
    
    // 获取服务商人员列表
    const fetchServiceProviderUserList = useFetchServiceProviderUserList()
    
    /** 
     * @description 是否显示无数据页面
     * 1. 服务商列表为空
     * 2. 且 不在加载状态
    */
    const isShowNotDataView = computed(() => {
      return isServiceProviderListEmpty.value && isFalse(serviceProviderLoading.value)
    })
    
    /** 
     * @description 是否不显示无数据页面
    */
    const isNotShowNotDataView = computed(() => {
      return isFalse(isShowNotDataView.value) && isServiceProviderListNotEmpty.value
    })
    
    const defaultCheckedKeys = computed(() => {
      return checkedServiceProviderItemList.value.map(item => getCheckedItemId(item))
    })
    
    const defaultExpandedKeys = computed(() => {
      
      // 服务商不显示全部
      if (isFalse(showSpAll.value)) {
        return []
      }
      
      // 默认展开第一级
      return serviceProviderList.value.map(item => getCheckedItemId(item))
    })
    
    const clearServiceProviderAndUserList = () => {
      setServiceProviderUserList([])
    }
    
    const onServiceProviderItemClickHandler = (value: SelectUserComponentServiceProvider) => {
      
      setCurrentServiceProviderNav(value)
      
      resetPageNum()
      
      const isInit = true
      
      fetchServiceProviderUserList(isInit).then(() => {
        emit(ServiceProviderEmitEventNameEnum.LoadUser)
      })
      
    }
    
    return {
      isShowNotDataView,
      isNotShowNotDataView,
      isShowServiceProviderCheckbox,
      serviceProviderList,
      
      defaultCheckedKeys,
      defaultExpandedKeys,
      
      currentServiceProviderNav,
      
      serviceProviderLoading,
      tabLoading,
      
      onServiceProviderItemClickHandler
    }
    
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: this.serviceProviderLoading && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderLeft} {...attrs}>
        
        <BaseSelectUserTreeComponent
          v-show={this.isNotShowNotDataView}
          current-node-key={this.currentServiceProviderNav?.id}
          default-expanded-keys={this.defaultExpandedKeys}
          default-checked-keys={this.defaultCheckedKeys}
          data={this.serviceProviderList}
          is-multi={this.isMulti}
          show-checkbox={this.isShowServiceProviderCheckbox}
          onClick={this.onServiceProviderItemClickHandler}
        >
        </BaseSelectUserTreeComponent>
        
        <BaseSelectUserNoDataView v-show={this.isShowNotDataView} />
        
      </div>
    )
  }
})
